<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="/css/el.css">
    <script src="/js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/el.js"></script>
    <script src="/js/axios.js"></script>
    <style>
        body{
            overflow-y: hidden;
        }
        * {
            margin: 0;
            padding: 0;
        }

        .navigationBar {
            height: 5vh;
            background-color: #FFFFFF;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            box-sizing: border-box;
            margin-bottom: 1vh;
        }

        .navigationBar ul{
            list-style-type: none;
            height: 100%;
            line-height: 5vh;
            padding: 0 20px;
        }

        .navigationBar ul li{
            display: inline-block;
        }

        .navigationBar ul li:first-child{
            font-size: 20px;
            font-weight: bold;
        }

        .navigationBar ul li:last-child{
            float: right;
        }

        .navigationBar ul li a{
            text-decoration: none;
            color: black;
            font-weight: bold;
        }

        .divBody {
            height: 95vh;
        }

        .sideNavigation {
            height: 94vh;
            background-color: #FFFFFF;
            border-right: 1px solid #ccc;
            box-sizing: border-box;
        }

        .sideNavigation .el-menu{
            border-right: none;
        }

        .page{
            height: 94vh;
            background-color: #FFFFFF;
            box-sizing: border-box;
        }

        iframe{
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            display: block;
            border:none;
        }


        .projectName {
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .projectInput {
            margin-bottom: 10px;
        }

        .projectInput button {
            width: 100%;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="navigationBar">
        <ul>
            <li>xxx管理系统</li>
            <li>
            <li class="end">
                <el-dropdown @command="logonOut()">
                    <a href="javaScript:void(0);">{{username}}</a>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </li>
            </li>
        </ul>
    </div>
    <div class="divBody">
        <el-row>
            <el-col :span="4">
                <div class="sideNavigation">
                    <el-menu default-active="1" class="el-menu-vertical-demo">
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-folder-opened"></i>
                                <span>项目</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="1-1" v-if="permissionId==1"  @click="iframeSrc = '/page/addProject'">新增项目</el-menu-item>
                                <el-menu-item index="1-2" v-if="permissionId==1" @click="iframeSrc = '/page/project'">项目信息</el-menu-item>
                                <el-menu-item index="1-3" @click="iframeSrc = '/page/authorizeProject'">项目授权</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                        <el-submenu index="2">
                            <template slot="title">
                                <i class="el-icon-s-order"></i>
                                <span>审核</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="2-1" @click="iframeSrc = '/page/declare'">报销申报</el-menu-item>
                                <el-menu-item index="2-2" @click="iframeSrc = '/page/addDeclare'">新增报销申报</el-menu-item>
                                <el-menu-item index="2-3" @click="iframeSrc = '/page/examine'">申报审核</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </div>
            </el-col>
            <el-col :span="20">
                <div class="page">
                    <iframe id="myIframe" :src="iframeSrc"></iframe>
                </div>
            </el-col>
        </el-row>
    </div>

    <el-dialog
            title="选择项目负责人"
            :visible.sync="dialogVisible"
            width="30%" :close-on-click-modal="false" :close-on-press-escape="false">
        <div>
            <el-row :gutter="20">
                <el-col :span="10">
                    <el-input v-model="name"  placeholder="请输入姓名"></el-input>
                </el-col>
                <el-col :span="10">
                    <el-select clearable filterable :disabled="limitSelection" v-model="department" placeholder="请选择部门" style="width: 100%;">
                        <el-option
                                v-for="item in departments"
                                :key="item.bcode"
                                :label="item.bcode+'/'+item.bname"
                                :value="item.bcode">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="queryUser()">查询</el-button>
                </el-col>
            </el-row>
        </div>
        <div style="height: 350px">
            <el-table :data="userList" style="width: 100%;">
                <el-table-column prop="userId" label="用户编号">
                </el-table-column>
                <el-table-column prop="name" label="姓名">
                </el-table-column>
                <el-table-column prop="permissionName" label="权限">
                </el-table-column>
                <el-table-column prop="bname" label="部门">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">选择</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div style="text-align: center">
            <el-pagination @current-change="currentChange" @next-click="nextClick()" @prev-click="prevClick()" :page-size="pageSize" background layout="prev, pager, next" :total="total">
            </el-pagination>
        </div>
    </el-dialog>


    <el-dialog title="项目信息修改" :visible.sync="updateVisible" @close="updateClose()" :close-on-click-modal="false"
               :close-on-press-escape="false" width="30%">
        <div class="updateProjectBody">
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="projectName">
                        项目编号
                    </div>
                    <div class="projectInput">
                        <el-input placeholder="请输入内容" :value="project.pid" :disabled="true"></el-input>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="projectName">
                        项目名称
                    </div>
                    <div class="projectInput">
                        <el-input placeholder="请输入项目名称" v-model="project.pname"></el-input>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="projectName">
                        余额方向
                    </div>
                    <div class="projectInput">
                        <el-select v-model="project.balanceDirection" placeholder="请选择" style="width: 100%;">
                            <el-option v-for="item in balanceDirections" :key="item.value" :label="item.label"
                                       :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="projectName">
                        归属部门
                    </div>
                    <div class="projectInput">
                        <el-select clearable filterable :disabled="true" v-model="project.bcode" placeholder="请选择部门" style="width: 100%;">
                            <el-option
                                    v-for="item in departments"
                                    :key="item.bcode"
                                    :label="item.bcode+'/'+item.bname"
                                    :value="item.bcode">
                            </el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="projectName">
                        项目负责人 <a href="javaScript:void(0);" @click="updateUserOpen()">选择负责人</a>
                    </div>
                    <div class="projectInput">
                        <el-input v-model="project.bname+'/'+project.uname" placeholder="请选择项目负责人" :disabled="true"></el-input>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="projectName">
                        超支限额
                    </div>
                    <div class="projectInput">
                        <el-input v-model="project.limitPayment" placeholder="请输入限额值"></el-input>
                    </div>
                </el-col>
                <el-col :span="24">
                    <div class="projectInput">
                        <el-checkbox v-model="project.stateEnable">是否启用</el-checkbox>
                    </div>
                </el-col>
                <el-col :span="24">
                    <div class="projectInput">
                        <el-button type="primary" @click="projectUpdate()">修改项目信息</el-button>
                    </div>
                </el-col>
            </el-row>
        </div>
    </el-dialog>

    <el-dialog
            title="申报信息修改"
            :visible.sync="AuthorizeVisible" @close="updateDeclare"
            width="90%" height="80vh" :close-on-click-modal="false" :close-on-press-escape="false">
        <iframe style="width: 100%;height: 80vh" :src="updateDeclareUrl"></iframe>
    </el-dialog>

</div>

<script>
    new Vue({
        el: "#app",
        mounted() {
            window.addEventListener('message', this.handleMessage);
        },
        data(){
            return{
                permissionId:sessionStorage.getItem("permissionId"),
                username:sessionStorage.getItem("name"),
                updateVisible:false,
                limitSelection:false,
                AuthorizeVisible:false,
                pageSize:5,
                total:0,
                lock:false,
                currentPage:1,
                name:'',
                department:'',
                departments: [],
                userList:[],
                dialogVisible:false,
                iframeSrc:"/page/examine",
                balanceDirections: [{
                    value: "0",
                    label: '支出'
                },
                    {
                        value: "1",
                        label: '收入'
                    }
                ],
                project:{},
                authorizeInformation:[],
                myProject:{
                    pid:""
                },
                updateDeclareUrl:"/page/updateDeclare"
            }
        },
        methods:{
            updateClose(){
                this.project = {};
            },
            projectUpdate(){
                //校验参数
                if(this.project.pname === undefined || this.project.pname.trim() === ""){
                    this.$message({
                        message: '请输入项目名称',
                        type: 'warning'
                    });
                    return;
                }else if(this.project.userId === undefined || this.project.userId.trim() === ""){
                    this.$message({
                        message: '请选择项目负责人',
                        type: 'warning'
                    });
                    return;
                }else if(this.project.balanceDirection=== undefined || this.project.balanceDirection.trim() === ""){
                    this.$message({
                        message: '请选择余额方向',
                        type: 'warning'
                    });
                    return;
                }else{
                    //校验是否是数字
                    const regex = /^\d+(\.\d+)?$/;
                    if(!regex.test(this.project.limitPayment.toString()) && this.project.initialAmount>=0){
                        this.$message({
                            message: '请输入合适的限制金额',
                            type: 'warning'
                        });
                        return;
                    }else {
                        if(!this.lock){
                            this.lock = true;
                            const formData = new FormData();
                            formData.append("pId", this.project.pid);
                            formData.append("pName", this.project.pname);
                            formData.append("balanceDirection", this.project.balanceDirection);
                            formData.append("userId", this.project.userId);
                            formData.append("limitPayment", this.project.limitPayment);
                            formData.append("state", this.project.stateEnable ? 1:0);
                            axios.post("/project/updateProject",formData)
                                .then((response)=>{
                                    response = response.data;
                                    if(response.code === 403){
                                        location.href = "/page/logonPage"
                                    }else if(response.code !== 200){
                                        this.$message.error(response.message);
                                    }else{
                                        const iframe = document.getElementById('myIframe');
                                        iframe.contentWindow.postMessage(response, '*');
                                        this.updateVisible = false;
                                    }
                                }).finally(() =>{
                                this.lock = false;
                            })
                        }
                    }
                }
            },
            updateUserOpen(){
                this.limitSelection = true;
                this.department = this.project.bcode;
                this.getUser();
                this.dialogVisible = true;
            },
            obtainProjectInformation(projectId){
                if(!this.lock){
                    this.lock=true;
                    const formData = new FormData();
                    formData.append("projectId", projectId);

                    axios.post("/project/obtainProjectInformation",formData)
                        .then((response)=>{
                            response = response.data;
                            if(response.code === 403){
                                location.href = "/page/logonPage"
                            }else if(response.code !== 200){
                                this.$message.error(response.message);
                            }else{
                                this.project = response.data;
                                this.updateVisible = true;
                            }
                        }).finally(() =>{
                        this.lock = false;
                    })
                }
            },
            handleEdit(e1,e2){
                if(this.project.bcode!==undefined){
                    this.project.userId = e2.userId;
                    this.project.bname = e2.bname;
                    this.project.uname = e2.name
                    this.dialogVisible = false;
                    this.department='';
                    return;
                }

                const iframe = document.getElementById('myIframe');
                iframe.contentWindow.postMessage(e2, '*');
                this.dialogVisible = false;
                this.department='';
                this.departments='';
            },
            currentChange(e){
                this.currentPage = e;
                this.getUser();
            },
            prevClick(){
                if(this.currentPage-1 === 0){
                    return;
                }
                this.currentPage -= 1;
                this.getUser();
            },
            nextClick(){
                this.currentPage += 1;
                this.getUser();
            },
            queryUser(){
                this.currentPage = 1;
                this.getUser();
            },
            getUser(){
                if(!this.lock){
                    this.lock = true;
                    const formData = new FormData();
                    formData.append("name", this.name);
                    formData.append("department", this.department);
                    formData.append("current", this.currentPage);
                    axios.post("/user/getUser",formData)
                        .then((response)=>{
                            response = response.data;
                            if(response.code === 403){
                                location.href = "/page/logonPage"
                            }else if(response.code !== 200){
                                this.$message.error(response.message);
                            }else{
                                this.userList = response.data.records;
                                this.total = response.data.total;
                                this.currentPage = response.data.current;
                            }
                        }).finally(() =>{
                        this.lock = false;
                    })
                }
            },
            handleMessage(message){
                if(message.data.page === "addProjectPid"){
                    this.iframeSrc = '/page/addProject'
                    const iframe = document.getElementById('myIframe');
                    iframe.addEventListener("load", function() {
                        console.log(message.data)
                        iframe.contentWindow.postMessage({page:"addProjectPid",pid:message.data.projectId}, '*');
                    });
                }else if(message.data.page === "addProject"){
                    if(message.data.bCode!==''){
                        this.department = message.data.bCode.split("/")[0]
                        this.limitSelection = true;
                    }else{
                        this.limitSelection = false;
                    }
                    this.departments = message.data.departments;
                    this.getUser();
                    this.dialogVisible = true;
                }else if(message.data.page === "deleteProject"){
                    this.$confirm('此操作将永久该项目信息(此操作会将项目下的子项目一并删除), 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        const iframe = document.getElementById('myIframe');
                        iframe.contentWindow.postMessage(page="deleteProject", '*');
                    }).catch(() => {
                    });
                }else if(message.data.page === "deleteProjectSingle"){
                    this.$confirm('此操作将永久该项目信息, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        const iframe = document.getElementById('myIframe');
                        iframe.contentWindow.postMessage({page:"deleteProjectSingle",pId:message.data.pId}, '*');
                    }).catch(() => {
                    });
                }else if(message.data.page === "declare"){
                    if(message.data.index === 1){
                        this.$confirm('此操作将删除所选择的申报信息,是否继续?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            const iframe = document.getElementById('myIframe');
                            iframe.contentWindow.postMessage({page:"deleteDeclare",row:message.data.row}, '*');
                        }).catch(() => {});
                    }else{
                        this.updateDeclareUrl = this.updateDeclareUrl+"?declareId="+message.data.row.declareId;
                        this.AuthorizeVisible = true;
                    }
                }else if(message.data.page === "updateDeclareSuccess"){
                    this.AuthorizeVisible = false;
                    const iframe = document.getElementById('myIframe');
                    iframe.contentWindow.postMessage({page:"updateDeclareSuccess"}, '*');
                }else {
                    this.departments = message.data.departments;
                    this.obtainProjectInformation(message.data.projectId);
                }
            },
            logonOut(){
                axios.post("/user/logonOut")
                    .then((response)=>{
                        location.href="/page/logonPage"
                    })
            },
            updateDeclare(){
                this.updateDeclareUrl="/page/updateDeclare"
            }
        }
    })
</script>
</body>
</html>